<template>
    <div class="screen-left">
        <div class="screen-left-item">
            <div class="item-up">
                <div class="item-up-left">
                    <div class="left-title">跨境电商</div>
                    <div class="left-img">
                        <img src="@/assets/icon/shopping.png" alt="">
                    </div>
                </div>
                <div class="item-up-right">
                    <div class="item-content">
                        <div class="title">产值收入（万元）</div>
                        <div class="value">
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                            <span class="digit">3</span>
                            <span class="digit">8</span>
                            <span class="digit">7</span>
                            <span class="digit">7</span>
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                        </div>
                        <div class="details">
                            <div class="detail-item">
                                <div class="detail-label">商户（万个）</div>
                                <div class="detail-value">1569</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">人次（万人）</div>
                                <div class="detail-value">564</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">客单价（元）</div>
                                <div class="detail-value">89</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item-down">
                <div class="item-down-title">跨境电商交易平台</div>
                <div ref="eCommerceChart" class="item-down-content"></div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-up">
                <div class="item-up-left">
                    <div class="left-title">数字游戏</div>
                    <div class="left-img">
                        <img src="@/assets/icon/coco.png" alt="">
                    </div>
                </div>
                <div class="item-up-right">
                    <div class="item-content">
                        <div class="title">产值收入（万元）</div>
                        <div class="value">
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                            <span class="digit">3</span>
                            <span class="digit">8</span>
                            <span class="digit">7</span>
                            <span class="digit">7</span>
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                        </div>
                        <div class="details">
                            <div class="detail-item">
                                <div class="detail-label">版号（个）</div>
                                <div class="detail-value">129</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">在线（万人）</div>
                                <div class="detail-value">19</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">员工（人）</div>
                                <div class="detail-value">6012</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item-down">
                <div class="item-down-title">游戏分类</div>
                <div ref="gameChart" class="item-down-content"></div>
            </div>
        </div>
        <div class="screen-left-item small-left">
            <div class="small-left-left">
                <div class="item-up-left">
                    <div class="left-title">就业现状</div>
                    <div class="left-img">
                        <img src="@/assets/icon/bys.png" alt="">
                    </div>
                </div>
            </div>
            <div class="small-left-right">
                <div class="small-item">
                    <div class="item-icon">
                        <img src="@/assets/icon/town.png" alt="城镇新增就业数">
                    </div>
                    <div class="item-content">
                        <div class="item-title">城镇新增就业数</div>
                        <div class="item-value">9212人</div>
                    </div>
                </div>
                <div class="small-item">
                    <div class="item-icon">
                        <img src="@/assets/icon/town.png" alt="城镇调查失业率">
                    </div>
                    <div class="item-content">
                        <div class="item-title">城镇调查失业率</div>
                        <div class="item-value">1.2%</div>
                    </div>
                </div>
                <div class="small-item">
                    <div class="item-icon">
                        <img src="@/assets/icon/his.png" alt="社保基金参保率">
                    </div>
                    <div class="item-content">
                        <div class="item-title">社保基金参保率</div>
                        <div class="item-value">50000</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

const eCommerceChart = ref(null);
const gameChart = ref(null);

let eCommerceChartInstance;
let gameChartInstance;

onMounted(() => {
    initCharts();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    eCommerceChartInstance?.resize();
    gameChartInstance?.resize();
};
const initCharts = () => {
    initCommerceChart();
    initGameChart();
};

const initGameChart = () => {
    if (gameChart.value) {
        gameChartInstance = echarts.init(gameChart.value);
        const option = {
            grid: {
                left: '0%',
                right: '2%',
                top: '100%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['IAA游戏', 'IAP游戏', 'APP', '3A游戏'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: 'white'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLabel: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '产值',
                    data: [20, 300, 100, 450],
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00BFFF' },
                            { offset: 1, color: '#188DF0' }
                        ]),
                        borderRadius: [4, 4, 0, 0]
                    }
                },
                {
                    name: '趋势',
                    data: [20, 100, 350, 80],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#FFD700'
                    }
                }
            ]
        };
        gameChartInstance.setOption(option);
    }
}

const initCommerceChart = () => {
    if (eCommerceChart.value) {
        eCommerceChartInstance = echarts.init(eCommerceChart.value);
        const option = {
            grid: {
                left: '0%',
                right: '2%',
                top: '100%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['亚马逊', 'Alibaba', 'Tiktalk', '其他'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: 'white'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLabel: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '产值',
                    data: [330, 30, 180, 80],
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00BFFF' },
                            { offset: 1, color: '#188DF0' }
                        ]),
                        borderRadius: [4, 4, 0, 0]
                    }
                },
                {
                    name: '趋势',
                    data: [220, 50, 350, 80],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#FFD700'
                    }
                }
            ]
        };
        eCommerceChartInstance.setOption(option);
    }
}


</script>
<style scoped lang="scss">
/* 左侧可视化组件样式 */
.screen-left {
    position: absolute;
    left: 1.04vw; // 20px
    top: 9.26vh; // 100px
    width: 20vw; // 360px
    height: calc(100vh - 12.96vh); // 140px
    z-index: 100;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .screen-left-item {
        width: 100%;
        height: 40%;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 174, 255, 0.3);
        border-radius: 0.42vw; // 8px
        box-shadow: 0 0.21vw 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
        position: relative;
        padding: 2%;
        box-sizing: border-box;

        .item-up {
            width: 100%;
            height: 50%;
            display: flex;

            .item-up-left {
                width: 30%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .left-title {
                    color: #fff;
                    width: 100%;
                    text-align: center;
                    background: linear-gradient(to right, blue, cyan);
                }

                .left-img {
                    width: 60%;
                    flex-grow: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }

            .item-up-right {
                width: 70%;
                height: 100%;
                padding-left: 15px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .item-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 90%;
                }

                .title-bar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .title {
                    font-size: calc(12px + 0.2vw);
                    font-weight: bold;
                    color: #a2d2ff;
                }

                .more {
                    font-size: calc(10px + 0.1vw);
                    color: #a2d2ff;
                    cursor: pointer;
                }

                .value {
                    font-size: calc(14px + 0.2vw);
                    font-weight: bold;
                    color: #fff;
                    text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                    display: flex;
                }

                .digit {
                    display: inline-block;
                    padding: 0.1vh 0.20vw; // 2px 5px
                    margin: 0 0.1vw; // 0 2px
                    background: rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 0.21vw; // 4px
                    box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
                    color: #fff;
                    text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
                }

                .details {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    width: 100%;
                    align-items: center;
                }

                .detail-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    position: relative;
                }

                .detail-item:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 15%;
                    bottom: 15%;
                    width: 1px;
                    background: rgba(0, 174, 255, 0.3);
                }

                .detail-label {
                    font-size: calc(8px + 0.1vw);
                    color: #a2d2ff;
                }

                .detail-value {
                    font-size: calc(12px + 0.2vw);
                    font-weight: bold;
                    color: #fff;
                    margin-top: 5px;
                }
            }
        }

        .item-down {
            width: 100%;
            height: 50%;

            .item-down-title {
                text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                display: flex;
                color: #00FFFF;
                font-size: calc(10px + 0.2vw);
                font-weight: bold;
                margin-top: 0.2vh;
            }

            .item-down-content {
                width: 100%;
                height: 80%;
            }
        }
    }

    .screen-left-item:last-child {
        height: 18.5%;
    }

    .small-left {
        display: flex;

        .small-left-left {
            width: 30%;
            height: 100%;
            display: flex;

            .item-up-left {
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .left-title {
                    color: #fff;
                    width: 100%;
                    text-align: center;
                    background: linear-gradient(to right, blue, cyan);
                }

                .left-img {
                    width: 60%;
                    flex-grow: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }
        }

        .small-left-right {
            width: 70%;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-left: 10px;
            box-sizing: border-box;

            .small-item {
                flex: 1;
                background: rgba(255, 255, 255, 0.05);
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding-left: 10px;

                .item-icon {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(0, 174, 255, 0.2);
                    border-radius: 50%;
                    margin-right: 10px;

                    img {
                        width: 20px;
                        height: 20px;
                        object-fit: contain;
                        filter: brightness(0) saturate(100%) invert(60%) sepia(100%) saturate(500%) hue-rotate(180deg) brightness(1.2) contrast(1);
                    }
                }

                .item-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .item-title {
                        font-size: calc(10px + 0.1vw);
                        color: #a2d2ff;
                        margin-bottom: 2px;
                    }

                    .item-value {
                        font-size: calc(10px + 0.15vw);
                        font-weight: bold;
                        color: #fff;
                        text-shadow: 0 0 6px rgba(0, 174, 255, 0.5);
                    }
                }
            }
        }
    }

}
</style>